<template>
  <div class="invite-calling-module">
    <div class="invite-calling-content">
      <div class="callee-avatar">
        <img :src="callee.avatar ||  'http://110.40.229.202//api/pms/images/18952334-4f0c-442a-ae7d-911949fd1895.jpg'">
      </div>
      <div class="callee-nickname">
        {{ callee.nickname }}
      </div>
      <div class="calling-pulse">

      </div>
      <div class="calling-ctrl-group" @click="cancelCall">
        <div class="calling-reject">
          <font-awesome-icon icon="fas fa-phone-slash"/>
        </div>
      </div>
      <div class="calling-timer-tip">
        {{time}}秒后自动挂断
      </div>
    </div>
  </div>
</template>


<script>


import {getCache} from "@/utils/local_cache";
import {reportCallReply, subCallRespond, unSubCallRespond} from "@/api/nats/private_chat";

export default {
  name: "CallWaiting",
  inject: ['callCommand'],
  props: {
    'calling': {
      type: Object
    },
    'receivedCallRingRespond': {
      type: Function
    },
    'cancelCallRing': {
      type: Function
    }
  },
  data() {
    return {
      callee: this.calling.callee,
      time: 30,
      timer: null,

      user: null,
    }
  },
  methods: {
    countdownClose(){
      this.timer = setInterval(() => {
        this.time--;
        if (this.time <= 0) {
          clearInterval(this.timer);
          this.cancelCall();
        }
      }, 1000);
    },
    cancelCall(){
      const {caller, callee} = this.calling
      reportCallReply(caller.id, callee.id, {
        command: this.callCommand.cancel,
        call: this.calling
      })
      this.cancelCallRing();
    },
    callRingRespond(respond){
      this.receivedCallRingRespond(respond);
    }
  },
  mounted() {
    this.user = getCache('user');
    if (this.user) {
      subCallRespond(this.user.id, this.callRingRespond)
    }
    this.countdownClose();
  },
  beforeDestroy() {
    clearInterval(this.timer);
    if (this.user) {
      unSubCallRespond(this.user.id)
    }
  }
}
</script>

<style scoped>
.invite-calling-module {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, .4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.invite-calling-content {
  position: fixed;
  top: 45%;
  left: 50%;
  /* 使用 vw 和 vh 单位实现响应式 */
  width: min(300px, 90vw);
  /* 根据 6:9 比例计算高度 */
  height: min(450px, 90vh);
  /* 使用 transform 居中 */
  transform: translate(-50%, -50%);
  background-color: #333;
  border: 1px solid rgba(246, 242, 242, 0.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
}

.callee-avatar {
  width: 60px;
  height: 60px;
  margin-top: 10vh;
  position: relative;
}


/* 两个伪元素做圆环 */
.callee-avatar::before,
.callee-avatar::after{
  content:'';
  position: absolute;
  inset: 0;               /* 与父元素完全重叠 */
  border-radius: 50%;
  border: 2px solid rgba(246, 242, 242, 0.7);
  animation: wave 5s ease-out infinite;
}

/* 错开动画时间，形成此起彼伏的波纹 */
.callee-avatar::after{
  animation-delay: 2.5s;
}

@keyframes wave{
  0%{
    transform: scale(1.1);   /* 从中心开始 */
    opacity: .9;
  }
  100%{
    transform: scale(2);    /* 扩散到 2 倍 */
    opacity: 0;
  }
}

.callee-avatar img {
  width: 100%;
  border-radius: 50px;
}

.callee-nickname {
  color: #fffff1;
  margin-top: 5px;
}

.calling-ctrl-group {
  margin-top: 15vh;
  background-color: #d21b1b;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
}

.calling-ctrl-group:hover {
  background-color: red;
  transform: scale(1.05);
}

.calling-reject {
  text-align: center;
  width: 100%;
  color: #fffff1;
  font-size: 20px;
}



.calling-timer-tip{
  color: #fffff1;
  font-size: 12px;
  margin-top: 10px;
}
</style>